html,
body,
.admin-container,
#app {
  height: 100%;
}
body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    '微软雅黑', Arial, sans-serif;
  color: #222831;
  font-size: 16px;
  overflow: hidden;
  background-color: var(--el-bg-color-page);
  .el-text {
    --el-text-color: inherit;
  }
}

.iconfont {
  font-size: inherit;
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-light);
  border-radius: 9px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: $color-primary;
  border-radius: 9px;
}
a {
  text-decoration: none;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-internal-autofill-selected {
  box-shadow: 0 0 0px 1000px white inset;
}
.admin-block-button {
  display: block;
  width: 100%;
}

.admin-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-container {
    height: 100%;
  }
}
.el-menu-item [class^='el-icon'] {
  margin-right: 0;
}
.admin-header {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  box-sizing: border-box;
  flex-shrink: 0;
  height: 70px;
  line-height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-right: 30px;
  box-shadow: 0 3px 4px var(--el-color-info-light-8);
  .el-badge {
    line-height: 1;
  }

  .admin-header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 24px;
  }

  .admin-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    .header-item {
      padding: 0 15px;
    }
    .el-dropdown-link {
      padding-left: 10px;
      outline: none;
      display: flex;
      align-items: center;
    }
  }

  .header-brand {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand-text {
    font-size: 24px;
    padding-left: 10px;
    font-weight: bold;
  }
  .admin-menu {
    width: 100%;
    padding: 0 100px;
    height: 70px;
    --el-menu-active-color: #ffffff;
    // --el-menu-text-color: #ffffff;
    --el-menu-hover-text-color: #ffffff;
    --el-menu-bg-color: none;
    --el-menu-hover-bg-color: var(--el-color-primary);
    --el-menu-item-height: 36px;
    --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
    --el-menu-horizontal-sub-item-height: 36px;
    --el-menu-item-font-size: 16px;
    --el-menu-item-hover-fill: var(--el-color-primary-light-9);
    --el-menu-border-color: var(--el-border-color);
    --el-menu-base-level-padding: 20px;
    --el-menu-level-padding: 20px;
    --el-menu-icon-width: 24px;
    --el-transition-duration: 0.15s;
    --el-box-shadow-light: none;
    --el-border-radius-small: 0px;
    .el-menu {
      height: 100%;
      border: none;
      .el-menu-item {
        border: none;
      }
      .el-menu-item.is-active,
      .el-sub-menu.is-active .el-sub-menu__title {
        background: var(--el-color-primary);
      }
      .el-sub-menu.is-opened .el-sub-menu__title {
        background: var(--el-color-primary);
        color: var(--el-menu-hover-text-color);
      }
      & > .el-sub-menu .el-sub-menu__title {
        border: none;
        &:hover {
          background: var(--el-color-primary);
        }
      }
    }
  }
}
.admin-sub-menu {
  --el-transition-duration: 0.15s;
  .el-menu {
    box-shadow: none;
  }
}
.admin-body {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .admin-slide {
    width: 250px;
    flex-shrink: 0;
    background-color: var(--el-menu-bg-color);
    --el-menu-active-color: #ffffff;
    // --el-menu-text-color: #ffffff;
    // --el-menu-hover-text-color: #ffffff;
    // --el-menu-hover-bg-color: var(--el-color-primary);
    .el-menu {
      height: 100%;
      border: none;
      .el-menu-item {
        border: none;
      }
      .el-menu-item.is-active {
        background: var(--el-color-primary);
        color: #fff;
      }

      .el-sub-menu.is-active .el-sub-menu__title {
        // background: var(--el-color-primary);
        background: var(--el-menu-hover-bg-color);
        color: var(--el-color-primary);
      }
      & > .el-sub-menu .el-sub-menu__title {
        // border: none;
        // &:hover {
        //   background: var(--el-color-primary);
        // }
      }
    }
  }
  .admin-body-view {
    width: 100%;
  }
}
.admin-header-right {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--el-text-color-secondary);

  .header-item {
    padding: 0 15px;
  }
}
.admin-view {
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.admin-view-header {
  width: 100%;
  flex-shrink: 0;
}
.admin-view-search {
  padding: 24px;
  padding-bottom: 24px-18px;
  background: var(--el-bg-color);
  flex-shrink: 0;
  margin-bottom: 24px;
}
.admin-view-body {
  box-sizing: border-box;
  padding: 24px;
  // min-height: 100%;
  background: var(--el-bg-color);
}
.admin-table-btns {
  padding-bottom: 15px;
}
.admin-table-list {
  .el-table {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: 1px solid var(--el-table-border-color);
    // --el-table-text-color: #1c2c49;
    // --el-table-header-text-color: #00152a;
    // --el-table-row-hover-bg-color: var(--el-fill-color-light);
    // --el-table-current-row-bg-color: var(--el-color-primary-light-9);
    --el-table-header-bg-color: var(--el-border-color-lighter);
    // --el-table-fixed-box-shadow: var(--el-box-shadow-light);
    // --el-table-bg-color: var(--el-fill-color-blank);
    // --el-table-tr-bg-color: var(--el-color-white);
    // --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
    // --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);

    .cell {
      min-height: 20px;
      padding: 7px;
    }
    .cell .el-switch {
      height: auto;
    }
  }
}

.el-form-item__content:empty:before,
.el-table__row .cell:empty:before,
.admin-table-links:empty:before,
.el-descriptions-item__content:empty:before {
  content: '--';
}

.admin-pager-container {
  box-sizing: border-box;
  padding: 25px 0;
  display: flex;
  justify-content: flex-end;
}

.el-input-group__append,
.el-input-group__prepend {
  background: none;
}
.el-input {
  --el-form-inline-content-width: auto;
}

html.dark {
  color-scheme: dark;
  --el-color-primary: #589ef8;
  --el-color-primary-light-3: #4475b4;
  --el-color-primary-light-5: #365986;
  --el-color-primary-light-7: #283d58;
  --el-color-primary-light-8: #223042;
  --el-color-primary-light-9: #1b222b;
  --el-color-primary-dark-2: #79b1f9;
  --el-color-success: #21ba45;
  --el-color-success-light-3: #1d8836;
  --el-color-success-light-5: #1b672d;
  --el-color-success-light-7: #184623;
  --el-color-success-light-8: #17351e;
  --el-color-success-light-9: #152519;
  --el-color-success-dark-2: #4dc86a;
  --el-color-warning: #f2711c;
  --el-color-warning-light-3: #af551a;
  --el-color-warning-light-5: #834318;
  --el-color-warning-light-7: #573016;
  --el-color-warning-light-8: #402716;
  --el-color-warning-light-9: #2a1d15;
  --el-color-warning-dark-2: #f58d49;
  --el-color-danger: #db2828;
  --el-color-danger-light-3: #9f2222;
  --el-color-danger-light-5: #781e1e;
  --el-color-danger-light-7: #501a1a;
  --el-color-danger-light-8: #3c1818;
  --el-color-danger-light-9: #281616;
  --el-color-danger-dark-2: #e25353;
  --el-color-error: #db2828;
  --el-color-error-light-3: #9f2222;
  --el-color-error-light-5: #781e1e;
  --el-color-error-light-7: #501a1a;
  --el-color-error-light-8: #3c1818;
  --el-color-error-light-9: #281616;
  --el-color-error-dark-2: #e25353;
  --el-color-info: #42b8dd;
  --el-color-info-light-3: #3487a1;
  --el-color-info-light-5: #2b6679;
  --el-color-info-light-7: #224550;
  --el-color-info-light-8: #1d353c;
  --el-color-info-light-9: #192428;
  --el-color-info-dark-2: #68c6e4;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
    0px 8px 16px -8px #000000;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;
  --el-border-color-darker: #636466;
  --el-border-color-dark: #58585b;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-fill-color-darker: #424243;
  --el-fill-color-dark: #39393a;
  --el-fill-color: #303030;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-blank: var(--el-fill-color-lighter);
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}

html.dark .ep-button {
  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

html.dark .ep-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

html.dark .ep-empty {
  --el-empty-fill-color-0: var(--el-color-black);
  --el-empty-fill-color-1: #4b4b52;
  --el-empty-fill-color-2: #36383d;
  --el-empty-fill-color-3: #1e1e20;
  --el-empty-fill-color-4: #262629;
  --el-empty-fill-color-5: #202124;
  --el-empty-fill-color-6: #212224;
  --el-empty-fill-color-7: #1b1c1f;
  --el-empty-fill-color-8: #1c1d1f;
  --el-empty-fill-color-9: #18181a;
}
